<template>
  <ul class="operator-parameter-tree">
    <li v-for="(parameter, index) in params" :key="index">
      <!-- 头 -->
      <header>
        <a-icon
          class="collapsible-icon"
          :type="parameter.collapsed ? 'down' : 'right'"
          @click="parameter.collapsed = !parameter.collapsed"
        />
        {{ parameter.name.length > 0 ? parameter.name : '未命名' }}
        <span class="type">({{ parameter.paramType }})</span>
      </header>
      <!-- 参数配置内容 -->
      <div v-if="parameter.collapsed" class="content">
        <!-- 参数名称 -->
        <div class="row">
          <div class="label">参数名称：</div>
          <div class="input">
            <a-input v-model="parameter.name" disabled placeholder="请输入..." />
          </div>
        </div>
        <!-- 参数类型 -->
        <div class="row">
          <div class="label">参数类型：</div>
          <div class="input">
            <a-select  v-model="parameter.paramType" disabled style="width: 100%;">
              <a-select-option value="int2">int2</a-select-option>
              <a-select-option value="int4">int4</a-select-option>
              <a-select-option value="int8">int8</a-select-option>
              <a-select-option value="float4">float4</a-select-option>
              <a-select-option value="float8">float8</a-select-option>
              <a-select-option value="text">text</a-select-option>
              <a-select-option value="char">char</a-select-option>
              <a-select-option value="varchar">varchar</a-select-option>
            </a-select>
          </div>
        </div>
        <!-- 类型 -->
        <div class="row">
          <div class="label">配置方式：</div>
          <div class="input">
            <a-select  v-model="parameter.type" disabled style="width: 100%;">
              <a-select-option value="sting">string</a-select-option>
              <a-select-option value="number">number</a-select-option>
              <a-select-option value="select">select</a-select-option>
              <a-select-option value="checkbox">checkbox</a-select-option>
            </a-select>
          </div>
        </div>
        <!-- 默认值 -->
        <div class="row">
          <div class="label">默认值：</div>
          <div class="input">
            <a-input v-model="parameter.default" disabled placeholder="请输入默认值..." />
          </div>
        </div>
        <!-- 如果是select checkbox -->
        <div v-if="parameter.type === 'select' || parameter.type === 'checkbox'" class="row-option">
          <div class="label">items：</div>
          <div class="condition">
            <div  v-for="(item, i) in parameter.items" :key="i" class="option-item">
              <a-input v-model="item.value" disabled placeholder="option..." />
            </div>
          </div>
        </div>

      </div>
    </li>
  </ul>
</template>

<script lang="ts">
import Vue from 'vue'
import Component from 'vue-class-component'
import { Prop } from 'vue-property-decorator'


@Component
export default class OperatorParameterTree extends Vue {
  @Prop() params!: Array<any>
}
</script>

<style lang="less" scoped>

.operator-parameter-tree {
  font-size: 0.9rem;
  list-style-type: none;
  margin: 10px 0;
  padding: 10px 0;

  > li:not(:first-child) {
    margin-top: 10px;
  }

  &::-webkit-scrollbar {
    height: 10px;
    width: 6px;
  }

  &::-webkit-scrollbar-track {
    background: rgb(239, 239, 239);
    border-radius: 2px;
  }

  &::-webkit-scrollbar-thumb {
    background: #bfbfbf;
    border-radius: 6px;
  }

  &::-webkit-scrollbar-thumb:hover {
    background: #333;
  }

  &::-webkit-scrollbar-corner {
    background: #179a16;
  }
}

/* 折叠箭头 */
.collapsible-icon {
  cursor: pointer;
  left: 5px;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);

  &:hover {
    color: #6570ff;
  }
}


header {
  height: 20px;
  padding: 0 25px;
  position: relative;

  .delete-btn {
    cursor: pointer;
    position: absolute;
    right: 1px;
    top: 50%;
    transform: translateY(-50%);
  }
}

/* 每一个 参数配置 div */
.content {
  padding-left: 25px;

  /* 配置项 */
  .row {
    display: flex;
    flex-direction: row;
    height: 30px;
    line-height: 30px;
    margin-top: 5px;
    position: relative;

    .label {
      flex: 0 0 80px;
    }

    .input {
      flex: 1 1;
    }
  }

  .row-option {
    display: flex;
    flex-direction: row;
    margin-top: 5px;
    position: relative;

    .label {
      flex: 0 0 80px;
    }

    /* 选项 */
    .condition {
      border: 1px solid #ddd;
      display: flex;
      flex-wrap: wrap;
      min-height: 40px;
      width: calc(100% - 80px);

      .option-item {
        margin: 3px;
        position: relative;
        width: 45%;

        .option-delete-btn {
          position: absolute;
          right: 5px;
          top: 50%;
          transform: translateY(-50%);
        }
      }

      .option-add-item {
        border: 1px solid #ddd;
        border-radius: 3px;
        display: flex;
        height: 32px;
        justify-content: center;
        margin: 3px;
        position: relative;
        text-align: center;
        width: 32px;

        .option-add-btn {
          position: absolute;
          top: 50%;
          transform: translateY(-50%);
        }
      }
    }
  }
}

.add-btn {
  cursor: pointer;
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
}
</style>
